<template>
  <!--
    	作者：luoyiming
    	时间：2020-06-20
    	描述：diy组件-参数设置
    -->
  <div id="diy-editor" ref="diy-editor" class="diy-editor form-horizontal">
    <template v-show="diyData.items.length && form.curItem">
      <!--顶部设置-->
      <template v-if="form.curItem.type == 'page'">
        <Setpages :curItem="form.curItem"></Setpages>
      </template>
      <!--搜索设置-->
      <template v-if="form.curItem.type == 'search'">
        <Search :curItem="form.curItem"></Search>
      </template>
      <!--图片轮播-->
      <template v-if="form.curItem.type == 'banner'">
        <Banner :curItem="form.curItem" :selectedIndex="form.selectedIndex"></Banner>
      </template>
      <!--图片-->
      <template v-if="form.curItem.type == 'imageSingle'">
        <ImageSingle :curItem="form.curItem" :selectedIndex="form.selectedIndex"></ImageSingle>
      </template>
      <!--图片橱窗-->
      <template v-if="form.curItem.type == 'window'">
        <Window :curItem="form.curItem" :selectedIndex="form.selectedIndex"></Window>
      </template>
      <!--视频组件-->
      <template v-if="form.curItem.type == 'video'">
        <Video :curItem="form.curItem" :selectedIndex="form.selectedIndex"></Video>
      </template>
      <!--文章组件-->
      <template v-if="form.curItem.type == 'article'">
        <Article :curItem="form.curItem" :selectedIndex="form.selectedIndex"></Article>
      </template>
      <!--头条快报-->
      <template v-if="form.curItem.type == 'special'">
        <Special :curItem="form.curItem" :selectedIndex="form.selectedIndex"></Special>
      </template>
      <!--公告组-->
      <template v-if="form.curItem.type == 'notice'">
        <Notice :curItem="form.curItem" :selectedIndex="form.selectedIndex"></Notice>
      </template>
      <!--导航组-->
      <template v-if="form.curItem.type == 'navBar'">
        <NavBar :curItem="form.curItem" :selectedIndex="form.selectedIndex"></NavBar>
      </template>
      <!--商品组-->
      <template v-if="form.curItem.type == 'product'">
        <Product :curItem="form.curItem" :selectedIndex="form.selectedIndex"></Product>
      </template>
      <!--优惠券A-->
      <template v-if="form.curItem.type == 'coupon'">
        <Coupon :curItem="form.curItem" :selectedIndex="form.selectedIndex"></Coupon>
      </template>
      <!--优惠券B-->
      <template v-if="form.curItem.type == 'coupontyb'">
        <Couponplanb :curItem="form.curItem" :selectedIndex="form.selectedIndex"></Couponplanb>
      </template>
      <!-- 新人优惠卷 -->
      <template v-if="form.curItem.type == 'newcoupon'">
        <NewPeopleCoupon :curItem="form.curItem" :selectedIndex="form.selectedIndex"></NewPeopleCoupon>
      </template>
      <!--门店-->
      <template v-if="form.curItem.type == 'store'">
        <Store :curItem="form.curItem" :selectedIndex="form.selectedIndex"></Store>
      </template>
      <!--客服-->
      <template v-if="form.curItem.type == 'service'">
        <Service :curItem="form.curItem" :selectedIndex="form.selectedIndex"></Service>
      </template>
      <!--富文本-->
      <template v-if="form.curItem.type == 'richText'">
        <RichText :curItem="form.curItem" :selectedIndex="form.selectedIndex"></RichText>
      </template>
      <!--辅助空白-->
      <template v-if="form.curItem.type == 'blank'">
        <Blank :curItem="form.curItem" :selectedIndex="form.selectedIndex"></Blank>
      </template>
      <!--辅助线-->
      <template v-if="form.curItem.type == 'guide'">
        <Guide :curItem="form.curItem" :selectedIndex="form.selectedIndex"></Guide>
      </template>
      <!--秒杀-->
      <template v-if="form.curItem.type == 'seckillProduct'">
        <Seckill :curItem="form.curItem" :selectedIndex="form.selectedIndex"></Seckill>
      </template>
      <!--拼团-->
      <template v-if="form.curItem.type == 'assembleProduct'">
        <assembleProduct :curItem="form.curItem" :selectedIndex="form.selectedIndex"></assembleProduct>
      </template>
      <!--新人专区-->
      <template v-if="form.curItem.type == 'previewProduct'">
        <Preview :curItem="form.curItem" :selectedIndex="form.selectedIndex"></Preview>
      </template>
      <!--砍价-->
      <template v-if="form.curItem.type == 'bargainProduct'">
        <BargainProduct :curItem="form.curItem" :selectedIndex="form.selectedIndex"></BargainProduct>
      </template>
      <!--直播-->
      <template v-if="form.curItem.type == 'live'">
        <Live :curItem="form.curItem" :selectedIndex="form.selectedIndex"></Live>
      </template>
      <!--标题-->
      <template v-if="form.curItem.type == 'title'">
        <Title :curItem="form.curItem" :selectedIndex="form.selectedIndex"></Title>
      </template>
      <!--秒杀拼团-->
      <template v-if="form.curItem.type == 'seckillassembleProduct'">
        <SeckillAssemble :curItem="form.curItem" :selectedIndex="form.selectedIndex"></SeckillAssemble>
      </template>
    </template>

    <!--上传图片-->
    <Upload v-if="isupload" :isupload="isupload" :config="{ total: 3 }" @returnImgs="returnImgsFunc"></Upload>

    <!--选择商品-->
    <ProductSelect :isproduct="isproduct" :excludeIds="excludeIds" :islist="islist"
      @closeDialog="closeProductDialogFunc($event)">产品列表弹出层</ProductSelect>

    <!--选择优惠券-->
    <GetCouponB v-if="open_coupon" :open_add="open_coupon" :excludeIds="excouponIds" :islist="iscouponlist" @closeDialog="closeCouponFunc($event, 'add')"></GetCouponB>
    
    <!--选择门店-->
    <StoreSelect :isstore="isstore" :islist="isstorelist"></StoreSelect>
  </div>
</template>

<script>
  import {
    deepClone
  } from '@/utils/base.js';
  import Setpages from './params/Setpages.vue';
  import Search from './params/Search.vue';
  import Banner from './params/Banner.vue';
  import ImageSingle from './params/ImageSingle.vue';
  import Window from './params/Window.vue';
  import Video from './params/Video.vue';
  import Article from './params/Article.vue';
  import Special from './params/Special.vue';
  import Notice from './params/Notice.vue';
  import NavBar from './params/NavBar.vue';
  import Product from './params/Product.vue';
  import Coupon from './params/Coupon.vue';
  import Couponplanb from './params/Couponplanb.vue';
  import Store from './params/Store.vue';
  import Service from './params/Service.vue';
  import RichText from './params/RichText.vue';
  import Blank from './params/Blank.vue';
  import Guide from './params/Guide.vue';
  import Seckill from './params/Seckill.vue';
  import Preview from './params/Preview.vue';
  import assembleProduct from './params/assembleProduct.vue';
  import BargainProduct from './params/BargainProduct.vue';
  import Live from './params/Live.vue';
  import Title from './params/Title.vue';
  import Upload from '@/components/file/Upload';
  import ProductSelect from '@/components/product/Product';
  import StoreSelect from '@/components/store/StoreSelect';
  import GetCouponB from '@/components/coupon/GetCouponB';
  import SeckillAssemble from './params/SeckillAssemble.vue';
  import NewPeopleCoupon from './params/NewPeopleCoupon.vue';

  export default {
    components: {
      /*顶部设置*/
      Setpages,
      /*搜素栏*/
      Search,
      /*图片轮播组件*/
      Banner,
      /*图片组件*/
      ImageSingle,
      /*图片橱窗*/
      Window,
      /*视频*/
      Video,
      /*文章*/
      Article,
      /*文章*/
      Special,
      /*公告组*/
      Notice,
      /*导航组*/
      NavBar,
      /*商品组*/
      Product,
      /*优惠券*/
      Coupon,
      /*优惠券B*/
      Couponplanb,
      /*门店*/
      Store,
      /*客服*/
      Service,
      /*富文本*/
      RichText,
      /*辅助空白*/
      Blank,
      /*辅助线*/
      Guide,
      /*秒杀*/
      Seckill,
      /*拼团*/
      assembleProduct,
      /*砍价*/
      BargainProduct,
      /*上传图片*/
      Upload,
      /*商品选择*/
      ProductSelect,
      /*门店选中*/
      StoreSelect,
      /*优惠券选择*/
      GetCouponB,
      /*直播*/
      Live,
      /*标题*/
      Title,
      /*秒杀拼团*/
      SeckillAssemble,
      Preview,
      /*新人优惠卷*/
      NewPeopleCoupon
    },
    data() {
      return {
        /*是否上传图片*/
        isupload: false,
        /*图片当前对象*/
        imgModel: null,
        /*是否打开产品弹出层*/
        isproduct: false,
        /*商品需要去重的*/
        excludeIds: [],
        /*是否多选*/
        islist: false,
        /*是否显示门店选中*/
        isstore: false,
        /*门店是否多选*/
        isstorelist: false,
        /*是否显示获取优惠券*/
        open_coupon: false,
        /*优惠券需要去重的*/
        excouponIds: [],
        /*优惠券是否多选*/
        iscouponlist: false,
      };
    },
    props: ['form', 'defaultData', 'diyData', 'opts'],
    created() {},
    methods: {
      /**
       * 编辑器：添加data元素
       */
      onEditorAddData: function() {
        let self = this;
        // 新增data数据
        var newDataItem = deepClone(self.defaultData[self.form.curItem.type].data[0]);
        self.form.curItem.data.push(newDataItem);
      },
      /**
       * 编辑器：重置颜色
       * @param holder
       * @param attribute
       * @param color
       */
      onEditorResetColor: function(holder, attribute, color) {
        holder[attribute] = color;
      },
      /**
       * 编辑器：删除data元素
       * @param index
       * @param selectedIndex
       */
      onEditorDeleleData: function(index, selectedIndex) {
        let self = this;
        if (self.diyData.items[selectedIndex].data.length <= 1) {
          self.$message({
            message: '至少保留一个',
            type: 'error'
          });
          return false;
        }
        self.diyData.items[selectedIndex].data.splice(index, 1);
      },
      /**
       * 编辑器：选择图片
       * @param source
       * @param index
       */
      onEditorSelectImage: function(index, imgUrl) {
        this.isupload = true;
        this.imgModel = {
          index: index,
          imgUrl: imgUrl
        };
      },

      /*上传图片*/
      returnImgsFunc(e) {
        if (e != null) {
          this.imgModel.index[this.imgModel.imgUrl] = e[0]['file_path'];
        }
        this.isupload = false;
      },

      /*商品选择列表弹出层*/
      openProduct(list, islist) {
        let arr = [];
        list.forEach(item => {
          arr.push(item.product_id);
        });
        this.excludeIds = arr;
        if (islist && typeof islist != 'undefined') {
          this.islist = true;
        } else {
          this.islist = false;
        }
        this.isproduct = true;
      },

      /*商品选择关闭弹窗*/
      closeProductDialogFunc(e) {
        if (this.form.curItem == null) {
          return;
        }
        this.isproduct = false;
        if (e.type == 'success') {
          if (this.form.curItem.data.length > 0 && this.form.curItem.data[0].is_default) {
            this.form.curItem.data = [];
          }
          if (this.islist) {
            this.form.curItem.data = this.form.curItem.data.concat(e.params);
          } else {
            this.form.curItem.data.push(e.params);
          }
        }
      },

      /*商品选择列表弹出层*/
      openStore(list, islist) {
        let arr = [];
        list.forEach(item => {
          arr.push(item.store_id);
        });
        this.excludeIds = arr;
        if (islist && typeof islist != 'undefined') {
          this.isstorelist = true;
        } else {
          this.isstorelist = false;
        }
        this.isstore = true;
      },
      
      /*选择优惠券*/
      openConpon(list,islist=false) {
        let arr = [];
        list.forEach(item => {
          arr.push(item.coupon_id);
        });
        this.excouponIds = arr;
        if (islist && typeof islist != 'undefined') {
          this.iscouponlist = true;
        } else {
          this.iscouponlist = false;
        }
        this.open_coupon = true;
      },
      
      /*关闭优惠券*/
      closeCouponFunc(e) {
        if (this.form.curItem == null) {
          return;
        }
        this.open_coupon = false;
        if (e.type == 'success') {
          if (this.form.curItem.data.length > 0 && this.form.curItem.data[0].is_default) {
            this.form.curItem.data = [];
          }
          if (this.iscouponlist) {
            this.form.curItem.data = this.form.curItem.data.concat(e.params);
          } else {
            this.form.curItem.data.push(e.params);
          }
        }
      },
    }
  };
</script>

<style>
  .param-img-item {
    position: relative;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #eeeeee;
    line-height: 20px;
  }

  .param-img-item .delete-box {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
    color: #cccccc;
  }

  .param-img-item .delete-box:hover {
    color: rgb(255, 51, 0);
  }

  .param-img-item .pic img {
    width: 200px;
    height: 100px;
    margin: 0 auto;
  }

  .param-img-item .icon img {
    width: 100px;
    height: 100px;
    margin: 0 auto;
  }

  .param-img-item .url-box {
    display: flex;
    justify-content: flex-start;
    line-height: 40px;
  }

  .param-img-item .url-box .key-name {
    display: block;
    width: 80px;
  }

  .param-img-item .url-box .el-input {
    flex: 1;
  }
</style>
